<template>
  <div v-if="filminfo">
    <!--  10   指令传参 -->
    <detail-header v-scroll="10">
      {{filminfo.name}}
    </detail-header>
    <div :style="{
      backgroundImage: 'url(' + filminfo.poster + ')',
    }" class="poster"></div>
    <div class="content">
      <div>{{ filminfo.name }}</div>
      <div class="content-bottom">
        <div>{{ filminfo.category }}</div>
        <div>{{ filminfo.premiereAt | dateFilter }}</div>
        <div>{{ filminfo.nation }} | {{ filminfo.runtime }}分钟</div>
        <div class="detail-bottom" :class="isHidden ? 'hidden' : ''">
          {{ filminfo.synopsis }}
        </div>
        <div style="text-align: center">
          <i class="iconfont" @click="isHidden = !isHidden" :class="isHidden ? 'icon-xiala' : 'icon-shangla1'"></i>
        </div>
      </div>

      <div>
        <div>演职人员</div>
        <detail-swiper :perview="4" name="actors">
          <detail-swiper-item v-for="(data, index) in filminfo.actors" :key="index" >
            <div :style="{
              backgroundImage: 'url(' + data.avatarAddress + ')',
            }" class="avatar"></div>
            <div style="text-align:center;font-size:12px">{{ data.name }}</div>
            <div style="text-align:center;font-size:10px;color:#797d82">{{ data.role }}</div>
          </detail-swiper-item>
        </detail-swiper>
      </div>

      <!-- 剧照 -->
      <div>
        <div>剧照</div>
        <detail-swiper :perview="2" name="photos" style="padding-bottom:3.0625rem">
          <detail-swiper-item v-for="(data, index) in filminfo.photos" :key="index" >
            <div :style="{
              backgroundImage: 'url(' + data+ ')',
            }" class="avatar"
            @click="handlePreview(index)">
            </div>
          </detail-swiper-item>
        </detail-swiper>
      </div>

    </div>
  </div>
</template>
<script>
import axios from 'axios'
import http from '@/util/http'
import moment from 'moment'
import Vue from 'vue'
import detailSwiper from '@/mycomponents/detail/DetailSwiper'
import detailSwiperItem from '@/mycomponents/detail/DetailSwiperItem'
import detailHeader from '@/mycomponents/detail/DetailHeader.vue'
import { ImagePreview, Toast } from 'vant'
import obj from '@/util/mixinObj'
Vue.filter('dateFilter', (date) => {
  return moment(date * 1000).format('YYYY-MM-DD')
})
Vue.directive('scroll', {
  inserted (el, binding) {
    el.style.display = 'none'
    window.onscroll = () => {
      if ((document.documentElement.scrollTop || document.body.scrollTop) > binding.value) {
        el.style.display = 'block'
      } else {
        el.style.display = 'none'
      }
    }
  },
  // 指令的销毁执行生命周期
  unbind () {
    window.scroll = null
  }
})
export default {
  mixins: [obj],
  data () {
    return {
      filminfo: null,
      isHidden: true
    }
  },
  components: {
    detailSwiper,
    detailSwiperItem,
    detailHeader
  },
  methods: {
    handlePreview (index) {
      ImagePreview({
        images: this.filminfo.photos,
        startPosition: index,
        closeable: true,
        closeIconPosition: 'top-left'
      })
    }
  },
  mounted () {
    // this.$route 当前匹配的路由
    // console.log('create', this.$route.params.myid)

    // 发axios 通过id访问详情页面 获取详情数据 布局页面
    http({
      url: `/gateway?filmId=${this.$route.params.myid}&k=1483226`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      console.log(res.data.data.film)
      this.filminfo = res.data.data.film
    })
    window.onscroll = () => {
      if (document.documentElement.scrollTo > 20) {
        console.log('显示')
      } else {
        console.log('隐藏')
      }
    }
  },
  destroyed () {
    window.onscroll = null
  }
}
</script>
<style lang="scss" scoped>
.poster {
  width: 100%;
  height: 13.125rem;
  background-position: center;
  background-size: cover;
}

.content {
  padding: 0.9375rem;

  .content-bottom {
    font-size: 13px;
    color: #797d82;
    margin-top: 4px;

    .detail-bottom {
      line-height: 15px;
    }

    .hidden {
      overflow: hidden;
      height: 30px;
    }
  }
  .avatar{
    width: 100%;
    height: 5.3125rem;
    background-position: center;
    background-size: cover;
  }
}
</style>
